<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable vue/no-unused-vars -->
<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="kao" >
       <div>
         <el-card class="box-card">
           <el-row :gutter="20">
             <el-col :span=8>
                 <!-- <el-input
                     placeholder="请输入类型名称内容进行查询"
                     v-model="typeSname"
                     clearable>
                 </el-input> -->
             </el-col>
             <el-col :span=13.5>
              <!-- <el-button icon="el-icon-search" circle @click="queryCommodityTypeByName"></el-button> -->
                 <!-- <el-button type="primary" @click="queryCommodityTypeByName">秒杀</el-button> -->
             </el-col>
             <el-col :span=111.5>
                 <el-button  type="primary" @click="openCommodityTypeAddWindow1" size:medium>设置新增秒杀商品</el-button>
             </el-col>
         </el-row>
         <el-table
         :data="kaoData"
         border
         style="width: 100%">
         <el-table-column
           prop="commodityName"
           label="商品名称"
           width="280">
          </el-table-column>
          <el-table-column
           prop="seckillPrice"
           label="秒杀价格"
           width="100">
          </el-table-column>
          <el-table-column
           prop="seckillStock"
           label="秒杀数量"
           width="100">
          </el-table-column>
           <el-table-column
             prop="imageId"
             label="类型图片"
             width="100">
             <template slot-scope="scope">
              <el-image
                  style="width: 100px height: 100px"
                  :src="'http://101.43.223.224:8765/image/getImageById?id='+scope.row.imageId.split(',')[0]"
                  ></el-image>
          </template>
            </el-table-column>
           <el-table-column
           prop="seckillStartDate"
           label="秒杀开始时间"
           width="170">
           </el-table-column>
           <el-table-column
           prop="seckillEndDate"
           label="秒杀结束时间"
           width="170">
           </el-table-column>
         <el-table-column
         fixed="right"
         label="操作"
         >
             <template slot-scope="scope">
               <!-- <el-button   @click="openCommodityTypeInfoWindow(scope.row)"  type="primary" size="small">查看</el-button> -->
               <el-button   @click="openupCommodityTypeInfoWindow(scope.row)"  type="success" size="small">修改秒杀信息</el-button>
               <el-button   @click="delCommodityTypeInfo(scope.row)" type="danger" size="small">秒杀下架</el-button>
             </template>
           </el-table-column>
         </el-table>
         <!-- <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="1"
         :page-sizes="[10, 20, 30, 40]"
         :page-size="10"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
       </el-pagination> -->
     </el-card>
     <el-dialog
       title="类型修改"
       :visible.sync="openUpdatewindows"
       width="40%">
       <el-form :model="kaoForm" :rules ="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="秒杀价格"  prop="seckillPrice">
        <el-input v-model="kaoForm.seckillPrice"></el-input>
        </el-form-item>
        <el-form-item label="秒杀数量"  prop="seckillStock">
          <el-input-number v-model="kaoForm.seckillStock" :step="1" step-strictly></el-input-number>
        </el-form-item>
        <el-form-item label="设置时间：" class="ip">
          <el-date-picker
                    v-model="kaoForm.seckillStartDate"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间"
                      align="right"
                    class="ii"
                     @change="changeTime()"
                    :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                </el-form-item>
                  <el-form-item label="结束时间：" class="ip">
                    <el-date-picker
                    v-model="kaoForm.seckillEndDate"
                    value-format="yyyy-MM-dd HH:mm:ss"

                    type="datetime"
                     placeholder="选择日期时间"
                    :picker-options="pickerOptions"
                    align="right"
                    class="ii"
                    @change="changeTime()"
                    >
                    <!-- :picker-options="pickerOptions" -->
                    </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="商品备注"  prop="back">
        <el-input v-model="openupdate.back"></el-input>
        </el-form-item> -->
     </el-form>
         <span slot="footer" class="dialog-footer">
           <el-button @click="openUpdatewindows = false">取 消</el-button>
           <el-button type="primary" @click="update()">确 定</el-button>
         </span>
       </el-dialog>
         <!--    查看详细信息  -->
    <el-dialog title="信息" :visible.sync="kaoInfoWindow" width="40%">
      <el-form :model="carB" :disabled="true" label-width="100px" class="demo-ruleForm">
    <el-form-item label="图片" >
      <template slot-scope="scope" >
          <!-- :src="`http://localhost:8989/getImageById?id=${scope.row.imageId}`" -->
           <el-image style="width: 100px; height: 100px" :src="'http://localhost:8989/getImageById?id='+kaoB.imageId"></el-image>
      </template>
    </el-form-item>
       <el-form-item label="名字" prop="typeSname">
         <el-input :value="kaoB.typeSname"></el-input>
       </el-form-item>
       <el-form-item label="电话" prop="kaoPrice">
         <el-input :value="kaoB.kaoPhone"></el-input>
       </el-form-item>
        <el-form-item label="备注" prop="back">
             <el-input v-model="kaoB.back"></el-input>
           </el-form-item>
     </el-form>
   </el-dialog>
 <el-dialog
   title="添加设置商品秒杀" 
   :visible.sync="dialogVisible"
   width="53%"
   >
   <el-row :gutter="20">
               <el-col :span=8>
                   <el-input
                       placeholder="请输入商品名称内容进行查询"
                       v-model="commodityName"
                       clearable>
                   </el-input>
               </el-col>
               <el-col :span=1.5>
                   <el-button type="primary" @click="queryCommodityByName">查询</el-button>
               </el-col>
           </el-row>
   <el-table
           :data="commodityData"
           border
           style="width: 100%">
           <el-table-column
             prop="imageId"
             label="类型图片"
             width="100">
             <template slot-scope="scope">
              <el-image
                  style="width: 100px height: 100px"
                  :src="'http://101.43.223.224:8765/image/getImageById?id='+scope.row.imageId.split(',')[0]"
                  ></el-image>
              </template>
            </el-table-column>
            <el-table-column
             prop="commodityName"
             label="商品名称"
             width="150">
            </el-table-column>
            <el-table-column
             prop="price"
             label="商品原价（元）"
             width="80">
             </el-table-column>
             <el-table-column
             prop="favorablePrice"
             label="商品现价（元）"
             width="80">
             </el-table-column>
             <el-table-column
             prop="goodsQuantity"
             label="库存数量"
             width="100">
             </el-table-column>
             <el-table-column
             prop="back"
             label="商品描述"
             width="200">
             </el-table-column>
             <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="1"
         :page-sizes="[10, 20, 30, 40]"
         :page-size="10"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
       </el-pagination>
           <el-table-column
           fixed="right"
           label="操作"
           width="200"
           >
               <template slot-scope="scope">
                 <el-button   @click="openSeckillAddWindow2(scope.row)"  type="primary" size="small">添加秒杀</el-button>
               </template>
             </el-table-column>
  </el-table>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
       <!-- <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button> -->
     </span>
   </el-dialog>
   <el-dialog
   title="秒杀添加"
   :visible.sync="dialogVisible1"
   width="40%">
   <el-form :model="kaoForm" :rules ="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="秒杀价格" prop="seckillPrice">
       <el-input v-model="kaoForm.seckillPrice"></el-input>
      </el-form-item>
      <el-form-item label="秒杀数量" prop="seckillStock">
        <el-input-number v-model="kaoForm.seckillStock" :step="1" step-strictly></el-input-number>
      </el-form-item>
        <el-form-item label="设置时间：" class="ip">
          <el-date-picker
                    v-model="kaoForm.seckillStartDate"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间"
                      align="right"
                    class="ii"
                     @change="changeTime()"
                    :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                </el-form-item>
                  <el-form-item label="结束时间：" class="ip">
                    <el-date-picker
                    v-model="kaoForm.seckillEndDate"
                    value-format="yyyy-MM-dd HH:mm:ss"

                    type="datetime"
                     placeholder="选择日期时间"
                    :picker-options="pickerOptions"
                    align="right"
                    class="ii"
                    @change="changeTime()"
                    >
                    <!-- :picker-options="pickerOptions" -->
                    </el-date-picker>
        </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible1 = false">取 消</el-button>
       <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
     </span>
   </el-dialog>
       </div>
     </div>
 </template>
<script>
// 创建类型名信息组件
export default {

data () {
  return {
    pickerOptions: { // 禁用当前日期之前的日期
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
    commodityData: [{
      }],
    file:'',
    commodityName:'',
    total: 0, // 总数量
    openupdate: [],
    kaoInfoWindow: false, // 查看窗口
    kaoB: {}, // 定义
    typeSname: '', //类型名
    imageUrl: '',
    imageFile: null,
    kaoData: [{
    }],
    openUpdatewindows: false,
    dialogVisible: false,
    dialogVisible1: false,
    kaoForm: {
      id:'',
      seckillPrice:'',
      seckillStock:'',
      seckillStartDate:'',
      seckillEndDate:'',
    },
    rules: {

      seckillStartDates: [
        { required: true, message: '请输入开始时间', trigger: 'blur' },
        { min: 1, max: 100, message: '长度在1到10个字符', trigger: 'blur' }
      ],
      seckillEndDate:[
        { required: true, message: '请输入结束时间', trigger: 'blur' },
        { min: 1, max: 100, message: '长度在1到50个字符', trigger: 'blur' }
      ],
    }
  }
},
mounted () { // 页面加载的时候所加载的方法
  // 初始化页面数据
  this.queryCommodityTypeByName()
   this.queryCommodityByName()
},
methods: {
  changeTime () {
      if (this.kaoForm.seckillStartDate == null) {
      } else if (this.orderForm.seckillEndDate == null) {
        this.kaoForm.totalPrice = 0
      } else {
        const aa = Date.parse(this.kaoForm.seckillStartDate)
        const bb = Date.parse(this.kaoForm.seckillEndDate)
        const diffDate = Math.abs(aa - bb) // 取相差毫秒数的绝对值
      }
    },
  handleSizeChange (val) {
    this.pageSize = val
    this.queryCommodityByName()
  },
  handleCurrentChange (val) {
    this.pageNum = val
    this.queryCommodityByName()
  },
  handleAvatarSuccess (res, file) {
    this.imageUrl = URL.createObjectURL(file.raw)
  },
  beforeAvatarUpload (file) {
    const isJPG = file.type === 'image/jpeg'
    const isLt2M = file.size / 1024 / 1024 < 2

    if (!isJPG) {
      this.$message.error('上传头像图片只能是 JPG 格式!')
      return false
    }
    if (!isLt2M) {
      this.$message.error('上传头像图片大小不能超过 2MB!')
      return false
    }
    this.imageFile = file
    this.imageUrl = URL.createObjectURL(file)
    return false
  },
  //秒杀修改
  update() {
  console.log(this.$refs.ruleForm);
      this.$axios.post('Seckill/publishSeckillUpdate',
        this.kaoForm
      ).then(res => {
        if (res.status === 200) {
          this.myMessage('success', '恭喜你，修改成功！');
          this.openUpdatewindows = false; // 关闭窗口
          this.kaoForm = {
            id:'',
            seckillPrice:'',
            seckillStock:'',
            seckillStartDate:'',
            seckillEndDate:'',
          };
          this.queryCommodityTypeByName();// 全查刷新
        }
      }).catch(err => {
        this.myMessage('warning', '对不起，保存失败，请稍后再试');
        console.log(err);
      });
},
  delCommodityTypeInfo (id) { // 删除类型名信息
    this.$confirm('此操作将删除该类型名信息，是否继续？', '提示', {
      cofirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(res => {
      // eslint-disable-next-line no-undef
      this.$axios.delete('Seckill/delSeckilById?id=' + id.id
      ).then(res => {
        if (res.status === 200) {
          this.myMessage('success', '删除成功！')
          this.queryCommodityTypeByName()
        } else {
          this.myMessage('warning', '删除失败！')
        }
      }).catch(res => {
        this.myMessage('error', '删除失败，请联系管理员！')
      })
    }).catch(() => {
      this.myMessage('info', '已取消删除')
    })
  },
  queryCommodityTypeByName () { // 通过名称查询类型名信息
    // eslint-disable-next-line no-undef
    this.$axios.get('Seckill/getSeckillByPage',
      {
        params: {
          // typeSname: this.typeSname,
          // pageSize: this.pageSize,
          // pageNum: this.pageNum
        }
      }
    ).then(res => {
      this.kaoData = res.data
      console.log(this.kaoData)
      // console.log('-------------------')
      // this.total = res.data.data.totalSize
    }).catch(err => {
      console.log(err)
    })
  },
  saveCommodityTypeInfo () { // 保持信息
  },
  openCommodityTypeAddWindow () { // 打开新增窗口
    this.dialogVisible = true
    this.imageUrl = ''
  },
  openCommodityTypeAddWindow1 () { // 打开新增秒杀全查窗口
    this.dialogVisible = true
    this.imageUrl = ''
  },
  openSeckillAddWindow2 (a) { // 打开新增秒杀窗口
    this.kaoForm.commId=a.id //获取商品id
    this.dialogVisible1 = true
  },
  openCommodityTypeInfoWindow (row) { // 打开查看窗口
    this.kaoInfoWindow = true
    this.kaoB = row
  },
  openupCommodityTypeInfoWindow (row) { // 修改查看窗口
    this.openUpdatewindows = true
    this.kaoForm = JSON.parse(JSON.stringify(row))
    // this.imageUrl = 'http://101.43.223.224:8765/image/getImageById?id=' + row.imgId
    // this.openupdate= row
  },
  //秒杀添加
  submitForm (formName) {
      console.log(this.$refs.ruleForm)
      this.$refs[formName].validate((valid) => {
        if (valid) { 
          // debugger 
          this.$axios.post('Seckill/publishSeckillAdd',
          this.kaoForm
          ).then(res => {
            if (res.status === 200) {
              this.myMessage('success', '恭喜你，添加成功！')
              this.dialogVisible1 = false // 关闭窗口
              this.kaoForm = {
              seckillPrice:'',
              seckillStartDate:'',
              seckillEndDate:'',
              seckillStock:'',
            }
              this.queryCommodityTypeByName()// 全查刷新
            }
          }).catch(err => {
            this.myMessage('warning', '对不起，保存失败，请稍后再试')
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
   // 通过商品名称查询商品信息
   queryCommodityByName () {
      this.$axios.get('Commodity/getCommodityByPage',
        {
          params: {
            commodityName: this.commodityName,
            pageSize: this.pageSize,
            pageNum: this.pageNum
          }
        }
      ).then(res => {
        this.commodityData = res.data.data.content
        console.log(this.commodityData)
        this.total = res.data.data.totalSize
      }).catch(err => {
        console.log(err)
      })
    },
  myMessage (type, message) {
    this.$message({
      message: message,
      type: type
    })
  }
}
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

